import Menu from 'ant-design-vue/es/menu'
import Icon from 'ant-design-vue/es/icon'

const {
	Item,
	SubMenu
} = Menu
/**
 * 菜单组件
 */
export default {
	name: "SiderMenu",

	props: {
		menuList: {
			type: Array,
			required: true
		},
		theme: {
			type: String,
			required: false,
			default: 'dark'
		},
		mode: {
			type: String,
			required: false,
			default: 'inline'
		},
		collapsed: {
			type: Boolean,
			required: false,
			default: false
		},

	},

	data() {
		return {
			openKeys: [],
			selectedKeys: [],
			cachedOpenKeys: []
		}
	},
	computed: {
		rootSubmenuKeys: vm => {
			const keys = []
			vm.menu.forEach(item => keys.push(item.path))
			return keys
		}
		
	},
	mounted () {
		this.updateMenu()
	},
	watch: {
		collapsed (val) {
			if (val) {
				this.cachedOpenKeys = this.openKeys.concat()
				this.openKeys = []
			} else {
				this.openKeys = this.cachedOpenKeys
			}
		},
		$route: function() {
			this.updateMenu()
		}
	},

	methods: {
		onOpenChange(openKeys) { // 控制菜单展开合并
			const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
			var state = false;
			this.menuList.filter(function(obj) {
				if (obj.id.indexOf(latestOpenKey) != -1) {
					state = true;
				}
			})
			if (!state) {
				this.openKeys = openKeys;
			} else {
				this.openKeys = latestOpenKey ? [latestOpenKey] : [];
			}
		},
		renderIcon(icon) { // 添加图标
			return ( < Icon type = { icon } / > )
		},
		renderItem(menu) { //菜单创建
			return menu.children ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
		},
		renderSubMenu(menu) { // 添加子菜单
			const itemArr = []
			menu.children.forEach(item => itemArr.push(this.renderItem(item)))
			return ( 
				<SubMenu { ...{ key: menu.menuUrl } } >
					<span slot = "title" >
						{ this.renderIcon(menu.icon ? menu.icon : 'pie-chart') }
						<span> { menu.name } </span> 
					</span >
					{ itemArr } 
				</SubMenu>
			)

		},
		renderMenuItem(menu) { // 添加第一层菜单
			const target = null
			const attrs = {
				href: menu.menuUrl
			} //, target: menu.meta.target 
			const tag = target && 'a' || 'router-link'
			const props = {
				to: { path: menu.menuUrl }
			}

			return ( 
				<Item { ...{key: menu.menuUrl}} >
					<tag { ...{props,attrs} } > 
						{this.renderIcon("mail")} 
						<span> 
						{menu.name} < /span> 
					</tag > 
				</Item>
			)
		},
		updateMenu() {
			
			const routes = this.$route.matched.concat()
			
			const {
				hidden
			} = this.$route.meta
			
			if (routes.length >= 3 && hidden) {
				routes.pop()
				this.selectedKeys = [routes[routes.length - 1].path]
			} else {
				this.selectedKeys = [routes.pop().path]
			}
			
			const openKeys = []
			if (this.mode === 'inline') {
				routes.forEach(item => {
					if(item.path){
						openKeys.push(item.path)
					}
				})
			}
		
			this.collapsed ?  (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
	
		}

	},

	render() {
		const {
			mode,
			theme,
			menuList
		} = this
		const props = {
			mode: mode,
			theme: theme,
			openKeys: this.openKeys,
		}
		
		const on = {
			select: obj => {
				this.selectedKeys = obj.selectedKeys
				this.$emit('select', obj)
			},
			openChange: this.onOpenChange
		}
		const menuTree = menuList.map(item => {
			return this.renderItem(item)
		})
		// mode="inline" { ...{key: menu.menuUrl}} { ...{props,on: on}} 
		return ( 
			<Menu vModel = {this.selectedKeys} { ...{props,on: on}} > 
				{menuTree}
			</Menu>
		)

	}

}
